<!-- 跳转路由导航栏 -->
<template>
  <div class="min">
    <router-view v-wechat-title="$route.meta.title" />
    <div style="height: 3.4375rem;width: 100%;"></div>
    <div class="nav">
      <van-tabbar route v-model="active">
        <van-tabbar-item to="/">
          <img :src="props.active?icon.iconaactive:icon.icona" alt="" slot="icon" slot-scope="props">
          <span>首页</span>
        </van-tabbar-item>
        <van-tabbar-item to="/Scenic/ScenicHome">
          <img style="height: 16px;" :src="props.active?icon.iconbactive:icon.iconb" alt="" slot="icon" slot-scope="props">
          <span>门票</span>
        </van-tabbar-item>
        <van-tabbar-item to="/specialty/specialty">
          <img :src="props.active?icon.iconcactive:icon.iconc" alt="" slot="icon" slot-scope="props">
          <span>特产</span>
        </van-tabbar-item>
        <van-tabbar-item to="/me">
          <img :src="props.active?icon.icondactive:icon.icond" alt="" slot="icon" slot-scope="props">
          <span>我的</span>
        </van-tabbar-item>
      </van-tabbar>
    </div>

  </div>


</template>

<script>
  import icona from '../assets/min/shouye1.png'
  import iconaactive from '../assets/min/shouye.png'
  import iconb from '../assets/min/menpiao1.png'
  import iconbactive from '../assets/min/menpiao.png'
  import iconc from '../assets/min/tecan1.png'
  import iconcactive from '../assets/min/tecan.png'
  import icond from '../assets/min/wode.png'
  import icondactive from '../assets/min/wode1.png'
  export default {
    name: 'min',
    data() {
      return {
        active: 1,
        icon: {
          icona: icona,
          iconaactive: iconaactive,
          iconb: iconb,
          iconbactive: iconbactive,
          iconc: iconc,
          iconcactive: iconcactive,
          icond: icond,
          icondactive: icondactive,
        }

      }
    },
    // components: {
    //    vanTabbar: Tabbar,
    //    vanTabbarItem: TabbarItem
    //  }
  }
</script>

<style lang="scss">
  .min {
    .nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 3rem;
      z-index: 9;
      display: flex;
      justify-content: center;
      /* flex-direction: column; */
      /* text-align: center; */
      background: white;
      align-items: center;
      border-top: 1px solid #b5b5b5;
      .van-tabbar{
        .van-tabbar-item{
          .van-tabbar-item__icon{
            img{
              height: 18px;
            }
          }
          .van-tabbar-item__text{
            font-size: 14px;
          }
        }
        .van-tabbar-item--active{
          color: #5cd6d0 !important;
        }
      }
    }
  }






  .router-link-exact-active {
    color: #5cd6d0 !important;
  }
</style>
